<template>
  <div>
    <SearchUser
      :user-total="userTotal"
      :max-user-nums="maxUserNums"
      @onShowAdd="onShowEdit({})"
    />
    <Rtable
      :url="url"
      :conditions="conditions"
      :columns="columns"
      :size="size"
      :get-response="getTableRes"
    />
    <EditUser
      :visible="modalKey === modalKeys.edit"
      @onClose="onHide"
      @onOk="onSubmitEdit"
    />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Rtable from '@/components/r-table'
import url from '@/api/url' // userGetPage
import SearchUser from './SearchUser'
import EditUser from './EditUser'

const modalKeys = {
  edit: 'edit'
}

export default {
  components: {
    Rtable,
    SearchUser,
    EditUser
  },
  data() {
    return {
      url: url.userGetPage,
      size: 15,
      modalKeys,
      userTotal: 0,

      columns: [
        {
          label: this.$t('firm.phone'),
          prop: 'telPhone'
        },
        {
          label: this.$t('firm.name'),
          prop: 'userName'
        },
        {
          label: this.$t('firm.role'),
          prop: 'isAdmin',
          formatter: (row, col, cellV) =>
            cellV ? this.$t('firm.administrator') : this.$t('firm.commonUser')
        },
        {
          label: this.$t('firm.position'),
          prop: 'positionName'
        },
        {
          label: this.$t('firm.explain'),
          prop: 'remark'
        },
        {
          label: this.$t('Tenant.tenantStatus'),
          prop: 'state',
          align: 'center',
          width: 70,
          operates: [
            {
              el: 'switch',
              prop: 'state',
              props(row) {
                return {
                  disabled: !!row.isAdmin,
                  'active-value': 0,
                  'inactive-value': 1
                }
              },
              opEvent: this.userEnableState
            }
          ]
        },

        {
          label: this.$t('firm.operation'),
          prop: 'operate',
          width: 300,
          operates: [
            {
              el: 'button',
              text: this.$t('btns.modify'),
              props(row) {
                return {
                  disabled: !!row.isAdmin
                }
              },
              opEvent: this.onShowEdit
            },
            {
              el: 'popconfirm',
              text: this.$t('firm.resetPW'),
              props(row) {
                return {
                  title: `this.$t('firm.affirmReset')`
                }
              },
              childProps(row) {
                return {
                  disabled: !!row.isAdmin
                }
              },
              opEvent: this.onReset
            }
            // {
            //   el: 'popconfirm',
            //   text: this.$t('btns.del'),
            //   props: {
            //     title: this.$t('firm.warn'),
            //     confirmButtonText: this.$t('firm.delUser'),
            //     cancelButtonText: this.$t('btns.cancel')
            //   },
            //   childProps(row) {
            //     return {
            //       type: 'info',
            //       disabled: !!row.isAdmin
            //     }
            //   },
            //   opEvent: this.onDel
            // }
          ]
        }
      ]
    }
  },
  computed: {
    ...mapState('firmMg', ['conditions', 'firmInfo']),
    ...mapGetters(['modalKey', 'modalData']),
    maxUserNums() {
      const { dmpTenant } = this.firmInfo || {}
      const { maxUserNums } = dmpTenant || {}
      console.log(maxUserNums, 'maxUserNums')
      return maxUserNums
    }
  },
  methods: {
    onReset(row) {
      console.log(row)
      this.$store.dispatch('firmMg/onResetUser', row.id)
    },
    onDel(row) {
      console.log(row)
      this.$store.dispatch('firmMg/onDelUser', row.id)
    },
    onShowEdit(row) {
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.edit,
        modalData: row
      })
    },
    onHide() {
      this.$store.dispatch('hideModal')
    },
    onSubmitEdit() {},
    getTableRes(res) {
      const { retData } = res || {}
      const { total } = retData || {}
      this.userTotal = total
    },
    // 修改status
    userEnableState(e, row) {
      const { id, state } = row
      this.$store.dispatch('firmMg/userEnableStatus', {
        userId: id,
        state: Number(Boolean(!Number(state)))
      })
      row.tenantStatus = e
    }
  }
}
</script>

<style></style>
